<template>
  <div class="register">
    <div class="r-header">
      <div class="content">
        <nuxt-link to="/" class="logo">
          <span
            class="img"
            style="font-size: 22px; font-weight: bold; margin-top: 10px"
            >沙鲜送</span
          >
          <!-- <img class="img" v-if="webConfigData.pcLogoImgText" :src="webConfigData.pcLogoImgText"/> -->
          <!--<span class="text">沙鲜送</span>-->
        </nuxt-link>
        <div class="go-login">
          {{ $t('register.haveAnAccount') }}
          <nuxt-link to="/login" class="login-btn">{{
            $t('register.goToLogin')
          }}</nuxt-link>
        </div>
      </div>
    </div>
    <!-- 第一步 -->
    <div
      class="r-con"
      v-if="registerStep == 1"
      :style="{ margin: $t('language') == 'en' ? '80px auto' : '100px auto' }"
    >
      <div class="steps">
        <div :class="['item', registerStep == 1 ? 'active' : '']">
          <div class="number">1</div>
          <div class="text">{{ $t('register.verifyCellPhoneNumber') }}</div>
        </div>
        <div class="item">
          <div class="number">2</div>
          <div class="text">
            {{ $t('register.fillInTheAccountInformation') }}
          </div>
        </div>
        <div class="item">
          <div class="number">3</div>
          <div class="text">{{ $t('register.completeRegistration') }}</div>
        </div>
      </div>
      <div class="con-box">
        <div :class="['item', errorTips == 1 ? 'error' : '']">
          <div class="input-box phone">
            <span class="ic">+86</span>
            <input
              type="text"
              class="input"
              v-model="mobile"
              :placeholder="$t('login.enterUserNumber')"
              maxlength="11"
            />
          </div>
          <div class="error-text" v-if="errorTips == 1">
            {{ $t('register.enterValidPhone') }}
          </div>
        </div>
        <div :class="['item', errorTips == 2 ? 'error' : '']">
          <div class="input-box code">
            <input
              type="text"
              class="input"
              v-model="validCode"
              :placeholder="$t('login.enterCode')"
            />
            <a
              href="javascript:void(0)"
              class="send-code"
              v-show="show"
              @click="getCode"
              >{{ $t('login.getCode') }}</a
            >
            <a
              href="javascript:void(0)"
              v-show="!show"
              class="send-code"
              style="cursor: not-allowed"
              >{{ count }} s</a
            >
          </div>
          <div class="error-text" v-if="errorTips == 2">
            {{ $t('login.enterCode') }}
          </div>
        </div>
        <div class="item agree">
          <!-- <input
            type="checkbox"
            @click="checkAgree"
            :class="['checkbox',isAgree?'checked': 'default']"
            class="checkbox default"
            style="margin-right:10px"
          /> -->
          <span class="text">
            {{ $t('login.consentOfRegisteredRepresentative') }}
            <a
              href="javaScript:void(0)"
              class="agreement"
              @click="toTermsPage(0)"
              >{{ $t('login.termsOfService') }}</a
            >{{ $t('login.and') }}
            <a
              href="javaScript:void(0)"
              class="agreement"
              @click="toTermsPage(1)"
              >{{ $t('login.privacyPolicy') }}</a
            >
          </span>
        </div>
        <span class="next" @click="registerNext">{{
          $t('register.nextStep')
        }}</span>
      </div>
    </div>
    <!-- /第一步 -->
    <!-- 第二步 -->
    <div
      class="r-con"
      v-if="registerStep == 2"
      :style="{ margin: $t('language') == 'en' ? '80px auto' : '100px auto' }"
    >
      <div class="steps">
        <div class="item active">
          <div class="number">1</div>
          <div class="text">{{ $t('register.verifyCellPhoneNumber') }}</div>
        </div>
        <div :class="['item', registerStep == 2 ? 'active' : '']">
          <div class="number">2</div>
          <div class="text">
            {{ $t('register.fillInTheAccountInformation') }}
          </div>
        </div>
        <div class="item">
          <div class="number">3</div>
          <div class="text">{{ $t('register.completeRegistration') }}</div>
        </div>
      </div>
      <div class="con-box">
        <div :class="['item', errorTips == 3 ? 'error' : '']">
          <div class="input-box">
            <input
              type="text"
              class="input"
              v-model="userName"
              :placeholder="$t('register.pleaseSetAccount')"
            />
          </div>
          <div class="error-text" v-if="errorTips == 3">
            {{ $t('register.setAccountNumberTips') }}
          </div>
        </div>
        <div :class="['item', errorTips == 4 || errorTips == 7 ? 'error' : '']">
          <div class="input-box">
            <input
              type="password"
              class="input"
              v-model="password"
              :placeholder="$t('register.pleaseSetYourPassword')"
            />
          </div>
          <div class="error-text" v-if="errorTips == 4">
            {{ $t('login.enterPassword') }}
          </div>
          <div class="error-text" v-if="errorTips == 7">
            {{ $t('register.passwordVerification') }}
          </div>
        </div>
        <div :class="['item', errorTips == 5 ? 'error' : '']">
          <div class="input-box">
            <input
              type="password"
              class="input"
              v-model="confirmPwd"
              :placeholder="$t('register.enterThePasswordAgain')"
            />
          </div>
          <div class="error-text" v-if="errorTips == 5">
            {{ $t('ucPassword.enterNewPasswordTips5') }}
          </div>
        </div>
        <span class="next" @click="registerNext">{{
          $t('register.nextStep')
        }}</span>
      </div>
    </div>
    <!-- /第二步 -->
    <!-- 第三步 -->
    <div
      class="r-con"
      v-if="registerStep == 3"
      :style="{ margin: $t('language') == 'en' ? '80px auto' : '100px auto' }"
    >
      <div class="con-box">
        <div class="register-success">
          <div class="img">
            <!-- <img src="~/assets/images/success.png" alt=""> -->
          </div>
          <div class="text">
            <div class="text-div">
              {{ $t('register.registrationSuccessful') }}
            </div>
            <div class="text-span">
              {{ $t('register.autoJumpToHome') }}
              <span style="color: blue">{{ loCount }} s</span>
            </div>
          </div>
        </div>
        <nuxt-link to="/" class="next suc-btn">{{
          $t('commonHead.home')
        }}</nuxt-link>
      </div>
    </div>
    <!-- /第三步 -->
    <div class="content r-footer">
      <div class="links">
        <nuxt-link to="/" class="item">{{
          $t('ucPassword.mallHome')
        }}</nuxt-link>
        <nuxt-link
          to="/user-center"
          class="item"
          v-show="!this.$route.name === 'register'"
          >{{ $t('commonHead.personalCenter') }}</nuxt-link
        >
        <a href="https://www.gz-yami.com/" target="_blank" class="item">{{
          $t('commonFoot.officialWebsite')
        }}</a>
        <a href="https://www.mall4j.com/" target="_blank" class="item">{{
          $t('commonFoot.openSourceWebsite')
        }}</a>
      </div> 
      <!-- <div class="copyright">
        {{
          $t('language') == 'zh'
            ? webConfigData.pcCopyrightCn
            : webConfigData.pcCopyrightEn
        }}
      </div> -->
       <div class="copyright">
      ©Copyright 2021 福建沙味天下信息技术有限公司 版权所有 |
      闽ICP备<a target="view_window" href="https://beian.miit.gov.cn" style="color:#666;">2021018819</a>号
    </div>
     
      <!-- <div class="copyright">©Copyright 2021 湖南洛云商城有限公司 版权所有 | 湘ICP备2021012025号</div> -->
    </div>
    <!-- 登录弹窗组件 -->
    <LoginPopup v-if="showLogin" v-on:hideLoginPop="hideLoginPop" />
    <!-- /登录弹窗组件 -->
  </div>
</template>

<script>
import util from '../plugins/util'
import Cookie from 'js-cookie'
import LoginPopup from '~/components/login-popup'
export default {
  components: {
    LoginPopup,
  },
  layout: 'empty',
  data() {
    return {
      registerStep: 1, // 注册步骤
      errorTips: 0, // 输入错误提示:  1手机号输入错误  2验证码输入错误  3账号输入错误  4密码输入错误  5验证密码输入错误
      mobile: '',
      validCode: '',
      userName: '',
      password: '',
      confirmPwd: '',
      checkRegisterSmsFlag: '', // 校验登录注册验证码成功的标识
      isAgree: true,
      // 验证码相关
      show: true,
      count: '',
      timer: null,
      hadGotCode: false,
      // 登录弹窗
      showLogin: false,

      // 完成跳转首页倒计时
      loTimer: null,
      loCount: 0,
      webConfigData: {}, // 网站配置信息
    }
  },
  methods: {
    /**
     * 获取验证码
     */
    getCode() {
      if (!util.checkPhoneNumber(this.mobile)) {
        this.errorTips = 1
        return
      }
      if (this.hadGotCode) {
        return
      }
      // 判断值
      this.hadGotCode = true
      this.errorTips = 0
      let sendSmsParam = {
        mobile: this.mobile,
      }

      this.$axios
        .put('/user/sendRegisterSms', sendSmsParam)
        .then(({ data }) => {
          const timeCount = 60
          if (!this.timer) {
            this.count = timeCount
            this.show = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= timeCount) {
                this.count--
              } else {
                this.show = true
                clearInterval(this.timer)
                this.timer = null
                this.hadGotCode = false
              }
            }, 1000)
          }
        })
      //判断值
      this.hadGotCode = false
    },

    /**
     * 同意条款
     */
    checkAgree() {
      this.isAgree = !this.isAgree
      if (this.errorTips == 6) {
        this.errorTips = 0
      }
    },

    /**
     * 跳转到《服务条款》或《隐私协议》
     */
    toTermsPage(sts) {
      this.$router.push({ path: '/termsPage?sts=' + sts })
    },

    /**
     * 注册-下一步按钮
     */
    registerNext() {
      if (this.registerStep == 1) {
        if (!util.checkPhoneNumber(this.mobile)) {
          this.errorTips = 1
          return
        } else if (!this.validCode.trim()) {
          this.errorTips = 2
          return
        } else {
          this.errorTips = 0
          // 校验验证码
          let checkRegisterSmsParam = {
            mobile: this.mobile,
            validCode: this.validCode,
          }
          this.$axios
            .put('/user/checkRegisterSms', checkRegisterSmsParam)
            .then(({ data }) => {
              this.checkRegisterSmsFlag = data
              this.registerStep += 1
            })
        }
        // if(!this.isAgree){
        //   this.$message.error('请同意服务条款和隐私策略')
        //   this.registerStep == 1;
        //   return
        // }
      } else if (this.registerStep == 2) {
        var reg = new RegExp('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,20}$')
        let result = reg.test(this.password)

        if (!util.checkUserName(this.userName)) {
          this.errorTips = 3
          return
        } else if (!this.password.trim()) {
          this.errorTips = 4
          return
        } else if (!result) {
          this.errorTips = 7
          return
        } else if (this.password != this.confirmPwd) {
          this.errorTips = 5
          return
        } else {
          this.errorTips = 0
          // 请求注册
          let userRegisterParam = {
            appType: 3, // 应用类型 1小程序 2微信公众号 3 PC
            checkRegisterSmsFlag: this.checkRegisterSmsFlag, // 校验登录注册验证码成功的标识
            mobile: this.mobile,
            userName: this.userName,
            password: this.password,
            registerOrBind: 1, // 验证类型 1注册 2绑定
            validateType: 1,
          }
          this.$axios
            .put('/user/registerOrBindUser', userRegisterParam)
            .then(({ data }) => {
              this.registerStep += 1
              Cookie.set('token', data.access_token)
              localStorage.setItem('nickName', data.nickName)
              setTimeout(() => {
                // window.location.pathname == '/register' ? this.$router.push({ path: '/' }) : window.location.reload();
                this.$router.push('/')
              }, 3000)
              const loTimeCount = 3
              if (!this.loTimer) {
                this.loCount = loTimeCount
                this.loTimer = setInterval(() => {
                  if (this.loCount > 0 && this.loCount <= loTimeCount) {
                    this.loCount--
                  } else {
                    clearInterval(this.loTimer)
                    this.loTimer = null
                  }
                }, 1000)
              }
            })
        }
      }
    },

    showLoginPopup() {
      this.showLogin = true
    },
    hideLoginPop() {
      this.showLogin = false
    },
  },
  mounted() {
    this.$axios.get('/webConfig/getPcWebConfig').then(({ data }) => {
      this.webConfigData = data
      localStorage.setItem('webConfig', JSON.stringify(data))
    })
    document.title = this.$t('register.registerAccount')
  },
  watch: {
    mobile() {
      if (this.hadGotCode) {
        this.hadGotCode = false
      }
    },
  },
}
</script>

<style scoped src='~/assets/css/register.css'></style>
